<template>
  <div>
    <ol class="breadcrumb-nav">
			<li>
				<a href="/admin.html">主页</a>
			</li>
			<li>
				<a v-link="{path:'/columnList'}">栏目列表</a>
			</li>
			<li>添加栏目</li>
		</ol>
    <form class="x-ui-form form pd-20">
      <!--栏目名称-->
			<div class="row cl">
				<label class="form-label col-2">栏目名称</label>
				<div class="col-10">
					<input type="text" v-model="column.name" class="input-text"/>
				</div>
			</div>
      <!--栏目简介-->
      <div class="row cl">
        <label class="form-label col-12 text-l">栏目简介</label>
        <div class="col-12">
          <textarea class="textarea" v-model="column.briefing"></textarea>
        </div>
      </div>
      <!--排序-->
			<div class="row cl">
				<label class="form-label col-2">栏目排序</label>
				<div class="col-10">
					<input type="text" v-model="column.sort" class="input-text"/>
				</div>
			</div>
      <!--提交-->
      <div @click="submit" class="btn btn-submit">提交</div>
    </form>
    <!--弹窗组件-->
    <xui-modal type="alert" :show.sync="columnstate" fname="submit">发布成功</xui-modal>
  </div>
</template>
<script>
  var	xuiModal = require("../../components/public/XuiModal.vue");
  export default{
    data(){
      return {
        column:{},
        columnstate:false
      }
    },
    methods:{
      submit:function(){
        var th = this;
        if(!th.column.name){
          alert("栏目名称不能为空");
        }else{
          th.$http.post("/addColumn" , th.column , function(res){
            if(res.state == "ok"){
              th.columnstate = true;
            }
          },"JSON");
        };
      }
    },
    route:{
			data(transition){
        var id = transition.to.query.id;
        if(id){
          this.$http.get("/columnEdit" , {id:id} , function(data){
  					transition.next({column:data.data});
  				},"JSON");
        };
      }
    },
    components:{
      xuiModal:xuiModal
    },
    created(){
      var th = this;
      this.$on("submit-choice" , function(){
        th.columnstate = false;
        th.$route.router.go("/columnList");
      });
      this.$on("submit-close" , function(){
        th.columnstate = false;
        th.$route.router.go("/columnList");
      });
    }
  }
</script>
